// 用户端，总页面，布局
import React, { Component } from 'react';
import { 
    Layout, 
    Menu, 
    Breadcrumb, 
    Button, 
    Space, 
    Input, 
    Select, 
    Avatar, 
    Statistic, 
    Row, 
    Col 
} from 'antd';
import { AntDesignOutlined, DollarOutlined } from '@ant-design/icons'
import {connect} from 'react-redux'


// 引入自定义组件
import Pupup from './Popup';
import Login from './Login';
import Register from './Register';
import UserInfo from './UserInfo';
import ContentPage from './ContentPage';
import TaskWorkerManagePage from './TaskWorkerManagePage';
import TaskMasterManagePage from './TaskMasterManagePage';
import AboutMoney from './AboutMoney'

// 自定义操作
import { PopupActivate } from '../redux/actions/popup';
import { ChangeUserinfoActivate } from '../redux/actions/userinfo'
import { GetContentPageSaga, UserUpdateBaseInfoSaga } from '../redux/actions/contentpage'
import { ChangeTaskTypeIdActivate, ChangeSearchValueActivate, ChangePageActivate } from '../redux/actions/public';
import { API_URL } from '../env'


// css样式
import './index.css'
// 头、内容、脚
const { Header, Content, Footer } = Layout;
// 搜索框
const {Search} = Input
// 选择器
const { Option } = Select

class Page extends Component {

    // state {
    //     value: ''
    // }

    // bug 因为异步执行，所以导致搜索后没有回到首页
    // bug解决，因为react更新数据是异步，所以设置一个等待操作，让接收的其他步骤先执行

    onSearch =  (value) => {
        window.location.reload()
    };

    handleChangeType = (value) => {
        console.log(value)
        new Promise(
            ()=>{
                this.props.ChangeTaskTypeIdActivate({task_type_id: String(value)})
            }
        ).then(new Promise(
            ()=>{
                this.props.ChangePageActivate({page: 1})
            }
        )).then(
           setTimeout(()=>{
               window.location.reload()
           }, 300)
        )
      }

      handleInputSearch = (e) => {
          setTimeout(()=>{
            this.props.ChangeSearchValueActivate({search_value: e.target.defaultValue})
            this.props.ChangePageActivate({page: 1})
          }, 300)
          
      }

    // 金币弹窗内容
    MoneyPopupActivate = () => {
        const obj = {
            activate: true,
            btn_left: "提现",
            btn_right: "充值",
            content: '如果您想进行提现或者充值，可以点击下方按钮'
        }
        this.props.PopupActivate(obj)
    }

    LoginPopupActivate = () => {
        const obj = {
            activate: true,
            btn_left: "取消",
            btn_right: "登录",
            content: '您目前还未登录，如果您想要进行登录，可以点击下方登录按钮'
        }
        this.props.PopupActivate(obj)
    }

    // 用户已登录弹窗内容
    LoginedPopupActivate = () => {
        // const obj = {
        //     activate: true,
        //     btn_left: "取消",
        //     btn_right: "退出登录",
        //     content: '登录成功,可退出'
        // }
        // this.props.PopupActivate(obj)
        const obj = {activate: true}
        this.props.ChangeUserinfoActivate(obj)
    }

    // 钩子函数
    componentDidMount() {
        // 刷新的时候，如果是登录状态，则更新基本信息
        const { UserUpdateBaseInfoSaga, userState, baseUserInfoState } = this.props
        if (userState.isLogin) {
            this.props.UserUpdateBaseInfoSaga({
                email: baseUserInfoState.email,
                username: baseUserInfoState.username,
                isLogin: userState.isLogin
            })
        }
    }

    // 点击按钮退出登录    

    render() {
        const {userState, baseUserInfoState, userinfoState, publicState} = this.props
        return (
            <div>
                <Layout>
                    <Header className='header' style={{ position: 'fixed', zIndex: 1, width: '100%'}}>
                        {
                        userinfoState.taskManageActivate
                        ?
                            // 任务管理页面标题
                            <p style={{color: "#fff", fontSize: "20px"}}>
                            {
                                baseUserInfoState.user_identity == 1
                                ?
                                "猎人任务管理"
                                :
                                "雇主任务管理"
                            }
                            </p>
                        :
                            // 任务领取标题
                            <Input.Group compact>
                                <Input.Search
                                    className='search_input'
                                    placeholder="输入搜索的任务关键字"
                                    defaultValue={publicState.search_value}
                                    // allowClear
                                    enterButton="搜索"
                                    size="large"
                                    onSearch={this.onSearch}
                                    onChange={this.handleInputSearch}
                                />
                                <Select 
                                className='select_type' 
                                size='large' 
                                defaultValue={publicState.task_type_id} 
                                onChange={this.handleChangeType}>
                                    <Option value="0">任意类型</Option>
                                    <Option value="1">软件开发</Option>
                                    <Option value="2">算法</Option>
                                    <Option value="3">人工智能</Option>
                                    <Option value="4">大数据</Option>
                            </Select>
                            </Input.Group>
                        }
                        
                        
                        {/* 金币 （1）检测登录，未登录弹窗提示用户登录 （2）已登录则提示用户提现还是充值 */}
                        <a onClick={userState.isLogin ? this.MoneyPopupActivate : this.LoginPopupActivate}>
                            <Row  gutter={16}>
                                <Col className='money_show' span={12}>
                                    <Statistic  value={!userState.isLogin ? 0 : baseUserInfoState.money} prefix={<DollarOutlined />} valueStyle={{color:'#fff'}}/>
                                </Col>
                            </Row>
                        </a>
                        {/* 头像 （1）未登录弹窗提示用户登录 （2）已登录则进入用户的个人页 */}
                        <a onClick={userState.isLogin ? this.LoginedPopupActivate : this.LoginPopupActivate}>
                            <Avatar className='user_loge' size={50} icon={<AntDesignOutlined />} src={
                                userState.isLogin
                                ?
                                    API_URL + "get_img/head_img/"+baseUserInfoState.username
                                :
                                    ""
                                }/>
                        </a>
                    </Header>

                    <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
                        {/* 提示登录、提现、充值的弹窗 */}
                        <Pupup />
                        <AboutMoney />
                        {/* 登录的表单弹窗 */}
                        <Login />
                        {/* 新用户注册的表单弹窗 */}
                        <Register />
                        {/* 用户的“我的”这个页面 */}
                        <UserInfo />
                        <div className="site-layout-background" style={{ margin: '32px 0', padding: 24, minHeight: 380 }}>
                        {
                            userinfoState.taskManageActivate
                            ?
                                baseUserInfoState.user_identity == 1
                                ?
                                <TaskWorkerManagePage />
                                :
                                <TaskMasterManagePage />
                            :
                            <ContentPage />
                                    
                        }
                        </div>
                    </Content>

                    <Footer style={{ textAlign: 'center' }}>任务悬赏系统&nbsp;&nbsp;&nbsp;Posted by: vick </Footer>
                </Layout>
            </div>
        )
    }
}

export default connect(
    state => ({
        popupState: state.Popup.popup,
        userState: state.PublicReducer.userLoginState,
        baseUserInfoState: state.PublicReducer.baseUserInfo,
        userinfoState: state.UserInfoReducer.userinfo,
        publicState: state.PublicReducer
    }),
    {
        PopupActivate,
        ChangeUserinfoActivate,
        GetContentPageSaga,
        UserUpdateBaseInfoSaga,
        ChangeSearchValueActivate,
        ChangeTaskTypeIdActivate,
        ChangePageActivate
    }
)(Page)
